<template>
  <div class="text">
    <el-form ref="dataForm" :model="dataForm" :rules="dataFormRule" label-width="80px" style="width:400px">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="dataForm.mobile"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-col :span="14">
          <el-input v-model="dataForm.code" maxlength="6">
          </el-input>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-button @click="getMobileCode()" :disabled="mobileFlag" class="w-percent-100" :loading="loading">
            {{ mobileBtnTitle }}
          </el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input v-model="dataForm.realName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="dataForm.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="newPassword">
        <el-input type="password" v-model="dataForm.newPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="mobileFormSubmitHandle">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
// import { messages } from '@/i18n'
import {
  validateMobile
  // validateEmail
} from '@/utils/validate'
export default {
  data () {
    return {
      count: 60,
      timer: null,
      mobileFlag: false,
      // emailFlag: false,
      mobileBtnTitle: this.$t('login.checkCodeBtn'),
      // emailBtnTitle: this.$t('login.checkCodeBtn'),
      loading: false,
      // i18nMessages: messages,
      // captchaPath: '',
      dataForm: {
        mobile: '',
        code: null,
        realName: '',
        password: '',
        newPassword: ''
      }
      // mobileForm: {
      //   mobile: '',
      //   code: null
      // },
      // emailForm: {
      //   email: '',
      //   code: null
      // },
      // isValidateCodeLogin: false
    }
  },
  computed: {
    dataFormRule () {
      return {
        mobile: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
          { required: true, validator: validateMobile, trigger: 'blur' }
        ],
        code: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
          { min: 6, message: '请输入6位验证码', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  created () {

  },
  methods: {
    // gotoLoginView () {
    //   this.$router.replace({ name: 'login' })
    // },
    // 获取手机验证码
    getMobileCode () {
      this.$refs.dataForm.validateField('mobile', mobileError => {
        if (!mobileError) {
          const TIME_COUNT = 120
          // 发送手机验证码
          if (!this.timer) {
            this.count = TIME_COUNT
            this.mobileFlag = true
            // 验证手机号码是否正确
            this.sendSmsCode(this.dataForm.mobile)
            this.mobileBtnTitle = '重新发送（' + this.count + '）'
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
                this.mobileBtnTitle = '重新发送（' + this.count + '）'
              } else {
                this.mobileFlag = false
                clearInterval(this.timer)
                this.timer = null
                this.mobileBtnTitle = '重新发送'
              }
            }, 1000)
          }
        } else {
          return false
        }
      })
    },
    // 发送短信验证码
    sendSmsCode (loginKey) {
      this.$http.post(`/register/sendSmsCode`, { params: { mobile: loginKey } }).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
      })
    },
    // 手机验证码提交
    mobileFormSubmitHandle: debounce(function () {
      this.loading = true
      this.$refs.dataForm.validate((valid) => {
        if (!valid) {
          this.loading = false
          return false
        }
        this.$http.post('/register/mobile', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            this.loading = false
            return false
          }
          this.$cookies.set('token', res.data)
          this.$emit('next')
          // this.$router.replace({ name: 'home' })
        }).catch((err) => {
          this.loading = false
          console.error(err)
          this.$message.error('系统异常，请联系管理员')
        })
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
